<!DOCTYPE html>
<html lang="en">
<div th:replace="layout/header::copy(${title})"></div>
<body>
<div class="content" id="app">
    <a href="/home/index">
        点击返回首页
    </a>
    <div>
        hello, [[${name}]]
    </div>
    <button class="btn" id="JS_dialog" @click="editBox(0)">添加商品</button>
    <table border="1" class="goods">
        <tr>
            <th>商品ID</th>
            <th>名称</th>
            <th>描述</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <tr id="lists" v-for="item,key in lists">
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.detail}</td>
            <td>${item.createTime}</td>
            <td>
                <button @click="editBox(item.id)">修改</button>
                <button @click="delBox(item.id)">删除</button>
            </td>
        </tr>
    </table>


    <!--遮罩层-->
    <div class="black" :class="box"></div>
    <!--弹出框盒子-->
    <div class="dialog" :class="box">
        <span style="display: inline-block;">商品操作</span>
        <span class="dialog_close" style="display: inline-block;padding-left: 470px;border-bottom: 1px solid #eee;">
                <span @click="closeBox" style="cursor:pointer;">X</span>
            </span>
        <form method="post" onSubmit="return false;" class="goods editBox">
            名称:<input type="text" name="name" v-model="name" /><br>
            描述:<input type="text" name="detail" v-model="detail" /> <br>
            <button @click="send">提交</button>
            <button @click="closeBox">取消</button>
        </form>
    </div>
</div>
</body>
<style type="text/css">
    .black {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 2;
        background: rgba(0, 0, 0, 0.1);
        top: 0;
        left: 0;
    }

    .dialog {
        position: fixed;
        z-index: 3;
        width: 500px;
        min-height: 300px;
        top: 50%;
        left: 50%;
        margin: -150px 0 0 -250px;
        background: #fff;
        padding: 15px;
        border-radius: 5px;
    }

    .hide {
        display: none;
    }

    .show {
        display: block !important;
    }

    .editBox {
        line-height: 50px;
    }
</style>
<script src="/js/axios.min.js">
</script>
<script src="/js/sweetalert2.min.js">
</script>
<link rel="stylesheet" type="text/css" href="/css/sweetalert2.min.css">
<script>
    const { createApp, reactive, toRefs, onMounted } = Vue;

    const EventHandle = {
        // 修改变量修饰符
        compilerOptions: {
            delimiters: ['${', '}'],
            comments: true
        },
        setup() {
            const globalData = reactive({
                lists: [],
                box: "hide",
                page: 0,
                pageSize: 20,
                name: '',
                detail: '',
            });

            onMounted(() => {
                getlist();
            });

            function getlist() {
                let formData = new FormData();
                formData.append('page', globalData.page);
                formData.append('pageSize', globalData.pageSize);

                axios({
                    url: '/api/goods/lists',
                    method: 'post',
                    data: formData,
                    headers: {
                        'ApiToken': 'demo_token',
                        'Content-Type': 'application/json; charset=UTF-8',
                    },
                }).then(function(response) {
                    console.log(response);
                    if(response.data.code == 200){
                        let res = response.data
                        globalData.lists.push(...res.rows);
                    }
                }).catch(function(error) {
                    console.log(error);
                });
            }

            function editBox(id) {
                console.log(id);
                globalData.id = id;
                globalData.box = "show";
                if (id > 0) {
                    let formData = new FormData();
                    formData.append('id', globalData.id);
                    axios({
                        url: '/api/goods/detail',
                        method: 'post',
                        data: formData,
                        headers: {
                            'ApiToken': 'demo_token',
                            'Content-Type': 'application/json; charset=UTF-8',
                        },
                    }).then(function(response) {
                        console.log(response)
                        if(response.data.code == 200) {
                            let goods = response.data.data;
                            globalData.name = goods.name;
                            globalData.detail = goods.detail;
                        }
                    }).catch(function(error) {
                        console.log(error);
                    });
                } else {
                    globalData.name = "";
                    globalData.detail = "";
                }
            }

            function closeBox() {
                globalData.box = "hide";
            }

            function send() {
                if (globalData.name == '') {
                    Swal.fire({
                        text: '名称不能为空',
                        icon: 'warning',
                        timer: 2000,
                    })
                    return false;
                }
                let formData = new FormData();
                formData.append('id', globalData.id);
                formData.append('name', globalData.name);
                formData.append('detail', globalData.detail);
                axios({
                    url: '/api/goods/operate',
                    method: 'post',
                    data: formData,
                    headers: {
                        'ApiToken': 'demo_token',
                        'Content-Type': 'application/json; charset=UTF-8',
                    },
                }).then(function(response) {
                    console.log(response)
                    closeBox();
                    if (response.data.code == 200) {
                        globalData.lists = [];
                        getlist();
                    }
                    Swal.fire({
                        text: response.data.msg,
                        icon: 'success',
                        timer: 2000,
                    })
                }).catch(function(error) {
                    console.log(error);
                });
            }

            function delBox(id) {
                Swal.fire({
                    title: '',
                    text: '确定删除吗？',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '确定',
                    cancelButtonText: `取消`,
                }).then((result) => {
                    if (result.isConfirmed) {
                        console.log('goods_del')
                        let formData = new FormData();
                        formData.append('id', id);
                        axios({
                            url: '/api/goods/del',
                            method: 'post',
                            data: formData,
                            headers: {
                                'ApiToken': 'demo_token',
                                'Content-Type': 'application/json; charset=UTF-8',
                            },
                        }).then(function(response) {
                            console.log(response)
                            if (response.data.code == 200) {
                                globalData.lists = [];
                                getlist();
                            }
                            Swal.fire({
                                text: response.data.msg,
                                icon: 'success',
                                timer: 2000,
                            })
                        }).catch(function(error) {
                            console.log(error);
                        });
                    }
                });
            }
            return {
                ...toRefs(globalData),
                getlist,
                editBox,
                closeBox,
                send,
                delBox
            }
        }
    }

    const app = createApp(EventHandle);
    app.mount("#app");
</script>

<div th:replace="layout/footer::copy"></div>
</html>
